<template>
  <el-button type="success" @click="CreateDia = true">创建</el-button>
  <Table :data="project.data.value" :sinput=false v-model:diag="project.dialogVisible.value">
    <el-table-column label="项目名" prop="name" width="230"/>
    <el-table-column label="创建时间" prop="ctime"  width="200"/>
    <el-table-column label="用户数" prop="users.length" width="100"/>
    <el-table-column label="代码库" prop="users.length" />
    <el-table-column label="分支" prop="users.length" width="200"/>
    <el-table-column fixed="right" label="操作"  width="200">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="project.ListUser(scope.row)">用户管理</el-button>
        <el-button link type="primary" size="small" @click="project.ListUser(scope.row)">代码库</el-button>
        <el-button link type="danger" size="small" @click="project.Delete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </Table>
  <Pagination @change="project.List()" v-model:page="project.pages.value"/>

  <Dialog v-model:diag="CreateDia" title="项目创建" @submit="project.Create(form)">
    <el-form :model="form" label-width="120px">
      <el-form-item label="项目名称">
        <el-input v-model="form.name"/>
      </el-form-item>
    </el-form>
  </Dialog>

  <Drawer v-model:diag="project.drawerDia.value" title="用户管理" size="50%">
    <el-button @click="project.innerDrawer.value = true" type="success">添加成员</el-button>

    <Table v-model:data="project.CPuserlist.value"  @selection-change="handleSelectionChange" :create="false" :sinput="false">
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户名" prop="username"/>
      <el-table-column label="角色" prop="Role"/>
      <el-table-column fixed="right" label="操作" width="200" >
        <template #default="scope" >
          <div class="operation" v-if="scope.row.username != 'admin'">
            <el-button link type="danger" @click="project.Deleteuser(scope.row)">移除</el-button>
          </div>
        </template>
      </el-table-column>
    </Table>

    <Drawer v-model:diag="project.innerDrawer.value" title="添加成员" @submit="project.Adduser(multipleSelection)">
      <Table v-model:data="project.userlist.value"  @selection-change="handleSelectionChange" :create="false" :sinput="false">
        <el-table-column type="selection" width="55" />
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="角色" prop="Role"/>
      </Table>
    </Drawer>
  </Drawer>
</template>

<script setup lang="ts">
import {ref,onMounted } from 'vue'
import {project} from './project_api'

import Table from '@/components/common/Table.vue'
import Pagination from '@/components/common/Pagination.vue'
import Drawer from '@/components/common/Drawer.vue'
import Dialog from '@/components/common/Dialog.vue'
const CreateDia = ref(false)
const form = ref({
  name: "",
})

onMounted( ()=>{
  project.List()
})


const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  console.log(multipleSelection.value)
  multipleSelection.value = val
}
</script>


<style scoped lang="scss">

</style>
